<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const router = useRouter()
const heroRef = ref(null)
const titleRef = ref(null)
const subtitleRef = ref(null)
const ctaRef = ref(null)
const sectionRefs = ref([])

const navigateToGallery = () => {
  router.push('/gallery')
}

onMounted(() => {
  // 英雄区动画
  const tl = gsap.timeline()

  tl.from(titleRef.value, {
    y: 50,
    opacity: 0,
    duration: 1,
    ease: 'power3.out'
  })
    .from(subtitleRef.value, {
      y: 30,
      opacity: 0,
      duration: 1,
      ease: 'power3.out'
    }, "-=0.7")
    .from(ctaRef.value, {
      y: 20,
      opacity: 0,
      duration: 0.8,
      ease: 'power3.out'
    }, "-=0.7")

  // 视差滚动效果
  gsap.to(heroRef.value, {
    backgroundPositionY: '30%',
    ease: 'none',
    scrollTrigger: {
      trigger: heroRef.value,
      start: 'top top',
      end: 'bottom top',
      scrub: true
    }
  })

  // 内容区块动画
  sectionRefs.value.forEach((section, index) => {
    gsap.from(section, {
      y: 50,
      opacity: 0,
      duration: 0.8,
      scrollTrigger: {
        trigger: section,
        start: 'top 80%',
        toggleActions: 'play none none none'
      },
      delay: index * 0.2
    })
  })
})
</script>

<template>
  <div class="home">
    <section class="hero" ref="heroRef">
      <div class="hero-content">
        <h1 ref="titleRef">记录美好瞬间</h1>
        <p ref="subtitleRef">探索我的摄影作品集，感受光影的魅力</p>
        <button class="cta-button" ref="ctaRef" @click="navigateToGallery">浏览相册</button>
      </div>
    </section>

    <section class="features">
      <div class="feature" ref="sectionRefs[0]">
        <div class="feature-icon" style="background-color: #FFD166;"></div>
        <h2>精选相册</h2>
        <p>精心整理的照片集，记录生活中的每一个精彩瞬间</p>
      </div>

      <div class="feature" ref="sectionRefs[1]">
        <div class="feature-icon" style="background-color: #06D6A0;"></div>
        <h2>高清画质</h2>
        <p>所有照片均以高分辨率呈现，让每一个细节都清晰可见</p>
      </div>

      <div class="feature" ref="sectionRefs[2]">
        <div class="feature-icon" style="background-color: #118AB2;"></div>
        <h2>流畅体验</h2>
        <p>优化的用户界面和流畅的动画效果，带来愉悦的浏览体验</p>
      </div>
    </section>

    <section class="about" ref="sectionRefs[3]">
      <div class="about-content">
        <h2>关于我的摄影</h2>
        <p>我热爱通过镜头捕捉世界的美丽瞬间。无论是壮观的自然风光，还是城市中的日常生活，每一张照片都承载着独特的故事和情感。</p>
        <p>通过这个相册网站，我希望能与您分享我眼中的世界。欢迎浏览我的作品集，感受光影交织的魅力。</p>
      </div>
      <div class="about-image">
        <!-- 使用背景色代替图片 -->
      </div>
    </section>
  </div>
</template>

<style scoped>
.home {
  width: 100%;
}

.hero {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://images.unsplash.com/photo-1465146344425-f00d5f5c8f07');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  position: relative;
}

.hero-content {
  max-width: 800px;
  padding: 0 2rem;
  z-index: 1;
}

.hero h1 {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.cta-button {
  background-color: hsla(160, 100%, 37%, 1);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

.feature {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s;
}

.feature:hover {
  transform: translateY(-10px);
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature h2 {
  margin-bottom: 1rem;
  color: var(--color-heading);
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: var(--color-heading);
}

.about-content p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.about-image {
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  min-height: 400px;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.2rem;
  }

  .about {
    grid-template-columns: 1fr;
  }

  .about-image {
    order: -1;
    min-height: 300px;
  }
}
</style>